// vue插件 - 功能就是实现vant组件的按需引入
// 按需引入所有用到的vant组件

// 1. vue插件是什么？
// 对vue框架本身全局功能的增强
// 1. 全局组件注册 Vue.component()
// 2. 全局指令注册 Vue.directive()
// 3. 全局实例属性/方法 Vue.prototype.$http = function(){}
// 4. 其他全局方法调用  Vue.use()
// 只要你现在想要做的事儿可以通过Vue构造函数实现 能力范围所及都可以封装为vue插件

// 2. vue如何定义插件？
// 俩个大步骤 1. 插件的定义  2.插件的注册
// 1. 如何定义插件？
import {
  Button, NavBar, CellGroup, Cell,
  Image, Dialog, Popup, Form, Field, Tabs, Tabbar,
  TabbarItem, Tab, PullRefresh, List, Divider, Tag,
  DatetimePicker, Lazyload, Search
} from 'vant'

// 2. 注册插件
// mainjs -> Vue.use(vantPlugin) -> 相当于执行了插件内部的install方法并且传入了Vue实参

// 3. 编写插件的核心逻辑
import { useIntersectionObserver } from '@vueuse/core'

const vantList = [
  Button, NavBar, CellGroup, Cell,
  Image, Dialog, Popup, Form, Field, Tabs, Tabbar,
  TabbarItem, Tab, PullRefresh, List, Divider, Tag,
  DatetimePicker, Lazyload, Search
]
export const vantPlugin = {
  install (Vue) {
    // 使用Vue进行插件逻辑的编写
    // 目标:实现vant组件的按需引入
    // 注册全局可用
    vantList.forEach(component => {
      Vue.use(component)
    })
  }
}
export const directivePlugin = {
  install (Vue) {
    console.log('指令的插件注册了', Vue)
    // 实现一个空的指令
    Vue.directive('lazy', {
      // 这个函数会在指令绑定到的那个元素完成挂载之后自动执行
      inserted (el, binding) {
        // el: 指令绑定的到那个dom元素  img - 将来作为监控是否进入视口的对象
        // binding.value: 指令等于号后面的那个表达式的数据 url - img.src = url
        // 编写核心逻辑: 监控el[img]是否进入到了视口区域 如果进来了 给el.src=url 正式发送网络请求
        // 1. 如何监控进入视口？ vueUse
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            // 这个地方的监听不会随着你赋值完毕就停止 而是会重复监听 只有监听的
            // 元素进入出去视口 总会不断地执行 性能浪费
            if (isIntersecting) {
              // 证明已经进来了
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
}

// 1. 搭建了一个没有任何功能的插件架子

// 2. 注册了一个全局指令 熟悉了一下指令的钩子函数 inserted  俩个参数 el - img binding.value - url

// 3. 懒加载的核心实现 1. 如何解决进入视口 vueUse  2. 如何让图片发送请求 img.src=url
